/**
 * <p>区域控件，继承自zxt.ui.Composite</p>
 * @class 
 * @param {String} title 标题
 * @param {int} state 展开/收起状态标识
 * @param {int} width 宽度
 */
zxt.ui.Region = function(title, state, width) {
	zxt.ui.Composite.call(this);
	
	this._title = title;
	this._width = width || "100%";
	
	//初始化标志
	this._initFlg = false;
	
	this.corner = "";

	switch (state) {
	case undefined:
		this._state = zxt.ui.Region.CLOSE_STATE;//0
		break;
	case zxt.ui.Region.CLOSE_STATE:
		this._state = zxt.ui.Region.CLOSE_STATE;
		break;
	case zxt.ui.Region.OPEN_STATE:
		this._state = zxt.ui.Region.OPEN_STATE;//1
		break;
	default:
		this._state = zxt.ui.Region.CLOSE_STATE;
	}
	this._topdown = true;

	this._$jqDom = $("<div class='Region-Panel'/>");
	this._$jqSkeleton == null;

	this._$titlePanel = null;
	this._$flagImg = null;
	this._$contentDiv = $("<div class='Region-ContentDiv'/>");
	
};

/**
 * (function) [GETTER | SETTER] 区域控件打开折叠函数
 *
 * @function
 */
zxt.ui.Region.prototype.openFunc = function(v) {
	if (v === undefined) {
		return this._openFunc;
	}
	this._openFunc = v;
};

/**
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的区域控件
 * 
 * @function
 * @static
 * @param {DOM} elem 解析的DOM元素
 * @return {zxt.ui.PasswordBox} 根据传入的DOM元素创建的区域控件
 */
zxt.ui.Region.parse = function(elem) {
	var j = $(elem);

	var _title = j.attr("zxt.title");
	
	var _stateS = j.attr("zxt.state");
	var _state = parseInt(_stateS);
	var _instance = new zxt.ui.Region(_title, _state);

	j.children().each(function(idx, dom) {
		_instance.addElement(dom);
	});

	var _id = j.attr("id");
	var _fun = "onOpen$" + _id;
	var _openFunc = window[_fun];
	if (zxt.util.isFunction(_openFunc)) {
		_instance._openFunc = _openFunc;
	};
	
	return _instance;
};

zxt.defineClazz(zxt.ui.Region, zxt.ui.Composite);

/**
 * 返回控件类型
 * 
 * @function
 * @return {string} "zxt.ui.Region"
 */
zxt.ui.Region.prototype.getType = function() {
	return "zxt.ui.Region";
};

/**
 * (int) [GETTER | SETTER] 宽度
 *
 * @function
 */
zxt.ui.Region.prototype.width = function(v) {
	if (v === undefined) {
		return this._width;
	}
	this._width = v;
};

/**
 * 区域控件属于收缩状态
 * 
 * @static
 */
zxt.ui.Region.CLOSE_STATE = 0;

/**
 * 区域控件属于展开状态
 * 
 * @static
 */
zxt.ui.Region.OPEN_STATE = 1;

/**
 * 区域控件内部结构渲染方法
 * @function
 * @private
 */
zxt.ui.Region.prototype._renderSkeleton = function() {
	var instance = this;

	this._$flagImg = new zxt.ui.Icon();
	this._$flagImg.width("16px");
	this._$flagImg.height("16px");
	this._$flagImg.clickFunc(function(){instance.onImgClick();});
	this.addOriginalChild(this._$flagImg);

	this._$titlePanel = new zxt.ui.TablePanel(1, 2);
	var _titlePanelDom = this._$titlePanel.render();
	$(_titlePanelDom).css("table-layout", "fixed");
	$(this._$titlePanel.getCell(0, 0)).attr("width", "100%");
	$(this._$titlePanel.getCell(0, 0)).append(
			$("<a class=Region-FieldsetCaption style='cursor:pointer;'>"+ this._title + "</a>"));
	$(this._$titlePanel.getCell(0, 1)).attr("width", "20px").append(this._$flagImg.render());

	var _titleDiv = $("<div class=\"Region-FieldsetTitle\">");
	_titleDiv.append(_titlePanelDom).css("cursor", "pointer");
	
	$(this._$titlePanel.getCell(0, 0)).click(function() {	instance.onClick();});

	var _html = "<fieldset class=\"Region-Fieldset\"></fieldset>";
	this._$jqSkeleton = $(_html);
	this._$jqSkeleton.append(_titleDiv).append(this._$contentDiv);

};

/**
 * 区域控件刷新渲染方法
 * @function
 * @private
 */
zxt.ui.Region.prototype._renderRefresh = function() {
	this._action(this._state === zxt.ui.Region.OPEN_STATE);
};

/**
 * <p>
 * 渲染该组合输入框的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.Region.prototype.renderSelf = function() {
	if (this._$jqSkeleton == null) {
		this._$jqDom.empty();
		this._renderSkeleton();
		this._$jqDom.append(this._$jqSkeleton);
	}else{
		this._renderRefresh();
	};
	return this._$jqDom.get(0);
};

/**
 * 展开区域控件
 * 
 * @function
 */
zxt.ui.Region.prototype.open = function() {
	
	if (zxt.util.isFunction(this._openFunc)) {
		this._openFunc.call(this);
	}
	
	this._state = zxt.ui.Region.OPEN_STATE;
	this.render();
};

/**
 * 折叠区域控件
 * 
 * @function
 */
zxt.ui.Region.prototype.close = function() {
	this._state = zxt.ui.Region.CLOSE_STATE;
	this.render();
};

/**
 * 区域控件图标单击函数
 * 根据当前区域的状态决定展开还是关闭
 * @function
 */
zxt.ui.Region.prototype.onImgClick = function() {
	switch (this._state) {
	case zxt.ui.Region.OPEN_STATE:
		this.close();
		break;
	case zxt.ui.Region.CLOSE_STATE:
		this.open();
		break;
	default:
	}
};

/**
 * 区域控件收缩的图标的点击事件
 * 
 * @event
 */
zxt.ui.Region.prototype.onClick = function() {
	switch (this._state) {
	case zxt.ui.Region.OPEN_STATE:
		this.close();
		break;
	case zxt.ui.Region.CLOSE_STATE:
		this.open();
		break;
	default:
	}
};

/**
 * 添加区域内的DOM节点
 * 
 * @function
 * @param {DOM} _element DOM节点
 */
zxt.ui.Region.prototype.addElement = function(_element) {
	this._$contentDiv.append(_element);
	this.render();
};

/**
 * 添加区域内的Widget控件
 * 
 * @function
 * @param {zxt.ui.Widget} widget Widget控件
 */
zxt.ui.Region.prototype.addWidget = function(widget) {
	var _element = widget.render();
	this.addChild(widget);
	this._$contentDiv.append(_element);
	this.render();
};

/**
 * 函数内容没有实现 无意义
 * @function
 * @private
 */
zxt.ui.Region.prototype.makeCorner = function() {
	if (this.corner) {
		this.container().corner(this.corner);
	}
};

/**
 * 区域控件展开关闭动作函数
 * @private
 * @param {Boolean} is_show 是否展开
 */
zxt.ui.Region.prototype._action = function(is_show) {

	var instance = this;

	this._$jqDom.css( {
		width : this._width
	});
	this._$contentDiv.css( {
		width : "100%"
	});

	if (is_show) {
		this._$flagImg.image(zxt.cfg.IMAGES_PATH + "/min.gif");
		this._$flagImg.render();
		//this._$jqDom.removeClass("Region-FieldsetClose").addClass("Region-FieldsetOpen");
	} else {
		this._$flagImg.image(zxt.cfg.IMAGES_PATH + "/max.gif");
		this._$flagImg.render();
		//this._$jqDom.removeClass("Region-FieldsetOpen").addClass("Region-FieldsetClose");
	}

	var _div = this._$contentDiv;

	if (is_show) {
		_div.show();

	} else {
		_div.hide();
	};
	this.makeCorner();

};
